<template>
<div class="where">
  <div class="where-title">
          周末去哪儿
  </div>
  <ul>
    <li v-for="item of list" :key="item.id">
      <div class="like-pic">
        <img :src="item.src" :alt="item.title" />
      </div>
      <h2>{{item.title}}</h2>
      <p>{{item.desc}}</p>
    </li>
  </ul>
</div>
</template>

<script>
export default {
  props: {
    list: Array
  }
}
</script>

<style scoped>
.where{width:100%;}
.where-title{height:.47rem;line-height:.47rem;padding:0.2rem 0 0.2rem 0.2rem; background: #eee;}
ul li{ padding:.2rem .2rem 0 .2rem; overflow: hidden;}
ul li .like-pic{ width:100%; height:0; padding-bottom: 37.8%; overflow:hidden;}
ul li .like-pic img{ width:100%;}
.where h2{font-size:.28rem; line-height:.32rem; margin-top: .3rem;}
.where p{font-size:.24rem; line-height:.5rem; color:#777;}
</style>
